<template>
    <div>
			<el-form :label-position="labelPosition" label-width="80px" :model="formLabelAlign">
				<el-form-item label="本品">
					<el-cascader
					:options="options2"
					@change="getId0"
					:show-all-levels="true"
					:props="props"
					placeholder="请选择本品"
				></el-cascader>
				</el-form-item>
				<el-form-item label="竞品">
					<el-cascader
					:options="options2"
					@change="getId1"
					:show-all-levels="true"
					:props="props"
					placeholder="请选择竞品"
				></el-cascader>
				<el-cascader
					:options="options2"
					@change="getId2"
					:show-all-levels="true"
					:props="props"
					placeholder="请选择竞品"
				></el-cascader>
				<el-cascader
					:options="options2"
					@change="getId3"
					:show-all-levels="true"
					:props="props"
					placeholder="请选择竞品"
				></el-cascader>
				<el-cascader
					:options="options2"
					@change="getId4"
					:show-all-levels="true"
					:props="props"
					placeholder="请选择竞品"
				></el-cascader>
				</el-form-item>
				<div style="padding-left: 80px;">
					<el-button type="primary" icon="el-icon-search" @click="search" :loading='action' class="search">搜索</el-button>
				</div>
			</el-form>
			<v-allVioce :data="vioce.data" :val="vioce.value" :name="vioce.name"></v-allVioce>
			<!-- <v-allHot :data="hot.data" :val="vioce.value" :name="vioce.name"></v-allHot> -->
			<v-opinions :data="hot.data" :val="vioce.value" :name="vioce.name"></v-opinions>
    </div>
</template>

<script>
		import allVioce from '@/components/views/chart/allVioce'
		import allHot from '@/components/views/chart/allHot'
		import Opinions from '@/components/views/charts/opinions'
		import { bus } from '@/bus.js'
    export default {
        data(){
            return {
							  action: false,
							  options2: [],
                vioce: {
									data: {},
									value: [],
									name: []
								},
								hot: {
									data: {}
								},
								chexi:{},
								value0: [],
								value1: [1],
								labelPosition: 'right',
								formLabelAlign: {
									name: '',
									region: '丰田，宝马',
									type: ''
								},
								props: {
									value: 'id',
									label: 'name',
									children: 'next'
								},
            }
        },
        components: {
            'v-allVioce': allVioce,
						'v-allHot': allHot,
						'v-opinions': Opinions
				},
				created(){
					let self = this;
					//获取品牌
					function getB(){
						return self.$http.get('gz/getBrand');
					}
					//获取车系
					function getS(){
						return self.$http.get('gz/getSeries');
					}
					this.$http.all([getB(), getS()])
					.then(self.$http.spread(function (b, s) {
						// 获取品牌，车系，车款后，填入数组
						let pinpai = b.data.BrandList;
						let chexi = s.data.SeriesList;
						self.chexi = chexi;
						for(let i = 0; i < pinpai.length; i++){
							pinpai[i].next = [];
							let id = pinpai[i].id;
							for(let j = 0; j < chexi.length; j++){
								if(chexi[j].parentId == id){
									pinpai[i].next.push(chexi[j]);
								}
							}
						}
						self.options2 = pinpai;
					}));
				},
				methods: {
					//获取从map传来的数据
					getData(data){
						this.item3.data = data;
					},
					getId0(val){
						this.value0[0] = val[1];
					},
					getId1(val){
							this.value1[0] = val[1];
					},
					getId2(val){
							this.value1[1] = val[1];
					},
					getId3(val){
							this.value1[2] = val[1];
					},
					getId4(val){
							this.value1[3] = val[1];
					},
					open4() {
						this.$message({
							showClose: true,
							message: '请选择本品以及竞品',
							type: 'error',
							duration: '1500'
						});
					},
					search(){
						let self = this;
						this.action = true;//loading状态
						//去空
						for(let i = 0; i < this.value1.length; i++){
							if(this.value1[i] == undefined){
								this.value1.splice(i, 1);
								i = i - 1;//因为空元素在数组下标 2 位置，删除空之后，后面的元素要向前补位，
							}
						}
						//校验输入
						if(this.value0.length == 0 || this.value1.length == 0){
							this.open4();
							this.action = false;
							return;
						}
						//生成本品加竞品的id
						let arr = [];
						arr = arr.concat(this.value0, this.value1);
						let Sname = [];//获取车系名字组合
						for(let i = 0; i < arr.length; i++){
							let id = arr[i];
							for(let q = 0; q < self.chexi.length; q++){
								if(self.chexi[q].id == id){
									Sname.push(self.chexi[q].name);
								}
							}
						}
						this.vioce.value = arr;
						this.vioce.name = Sname;
						//get全网声量
						$.ajax({
								url: 'gz/getLineVoice',
								data: {
									seriesId: arr
								},
								traditional: true,
								success: function(data){
									self.vioce.data = data;
									self.action = false;
								},
								error: function(){
								}
						})
						// //口碑分析
						// $.ajax({
						// 		url: 'gz/getKouBeiRatio',
						// 		data: {
						// 		seriesId: arr
						// 		},
						// 		traditional: true,
						// 		success: function(data){
						// 			self.action = false;
						// 			self.hot.data = data;
						// 		},
						// 		error: function(){
						// 		}
						// })
						//口碑分析
						$.ajax({
								url: 'gz/getKouBeiRatio',
								data: {
								seriesId: arr
								},
								traditional: true,
								success: function(data){
									self.action = false;
									self.hot.data = data;
								},
								error: function(){
								}
						})
					}
				}
    }
</script>

<style scoped>

</style>